import React, { FC, useEffect } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { useNavigation, useRoute, RouteProp  } from '@react-navigation/native'

type Props = {
  
}

type RootStackParamList = {
  Home: undefined
  List: { item: { [props: string]: any } }
  Detail: undefined
};

type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'List'>;

const List:FC<Props> = (props) => {
  const navigator = useNavigation()
  const route = useRoute<ProfileScreenRouteProp>()

  useEffect(() => {
    navigator.setOptions({
      title: route.params.item.title
    })
  }, [navigator])

  const handlePress = () => {
    navigator.navigate('Detail' as never)
  }

  return (
    <TouchableOpacity
      onPress={handlePress}
    >
      <View style={{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Text>进入详情</Text>
      </View>
    </TouchableOpacity>
  )
}

export default List